<template>
	<view class="bg-white full]">
		<action-bar title="支出详情"></action-bar>
		<view>
			<amount-list 
				v-if="outcomeList.length > 0"
				headerTitle="支出列表"
				:dataList="outcomeList"
				amountTitle="outcome"
				@moreClick="turn_to_detail_page(arguments)">
			</amount-list>
			<view v-else class="text-center padding text-bold">暂时没有支出哦</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.book_id = option.id
			// this.book_id = 12
			console.debug('账本ID默认为11 wait delete')
		},
		data() {
			return {
				book_id: 11,
				curPage: 1,
				hasNext: true,
				outcomeList: []
			}
		},
		onShow() {
			this.curPage = 1
			this.hasNext = true
			this.outcomeList = []
			this.queryOutcomeList()
		},
		methods: {
			queryOutcomeList() {
				if (this.hasNext) {
					this.$request({
						url: `/record/${this.book_id}/outcome/pn/${this.curPage}`
					}).then(res => {
						if (res && res.data.code == 200) {
							this.outcomeList = res.data.list
							this.hasNext = res.data.list.length >= this.$store.state.pageSize
							this.hasNext ++
						}
					})
				}
			},
			
			turn_to_detail_page(args) {
				let [userId, bookId] = args
				uni.navigateTo({url: `./expenditure-detail?userId=${userId}&bookId=${bookId}`})
			}
		}
	}
</script>

<style>
</style>
